import React from 'react';
import { ProCard, StatisticCard } from '@ant-design/pro-components';
import { Row, Col, Card, List, Avatar, Tag } from 'antd';
import {
  UserOutlined,
  CarOutlined,
  TeamOutlined,
  CheckCircleOutlined,
  ClockCircleOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons';
import { Line, Pie } from '@ant-design/plots';

const { Statistic } = StatisticCard;

const Home: React.FC = () => {
  // 模拟数据
  const studentData = [
    { month: '1月', count: 120 },
    { month: '2月', count: 150 },
    { month: '3月', count: 180 },
    { month: '4月', count: 200 },
    { month: '5月', count: 250 },
    { month: '6月', count: 280 },
  ];

  const passRateData = [
    { type: '科目一', value: 85 },
    { type: '科目二', value: 75 },
    { type: '科目三', value: 80 },
    { type: '科目四', value: 90 },
  ];

  const recentStudents = [
    { name: '张三', status: '学习中', progress: '科目二', time: '2024-03-20' },
    { name: '李四', status: '待考试', progress: '科目一', time: '2024-03-19' },
    { name: '王五', status: '已通过', progress: '科目三', time: '2024-03-18' },
  ];

  return (
    <div style={{ padding: '24px' }}>
      {/* 统计卡片 */}
      <Row gutter={[16, 16]}>
        <Col span={6}>
          <Card>
            <Statistic
              title="总学员数"
              value={1234}
              prefix={<UserOutlined />}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="在训车辆"
              value={25}
              prefix={<CarOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="教练人数"
              value={15}
              prefix={<TeamOutlined />}
              valueStyle={{ color: '#722ed1' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="本月通过率"
              value={85}
              suffix="%"
              prefix={<CheckCircleOutlined />}
              valueStyle={{ color: '#faad14' }}
            />
          </Card>
        </Col>
      </Row>

      {/* 图表区域 */}
      {/*<Row gutter={[16, 16]} style={{ marginTop: '24px' }}>*/}
      {/*  <Col span={16}>*/}
      {/*    <ProCard title="学员增长趋势">*/}
      {/*      <Line*/}
      {/*        data={studentData}*/}
      {/*        xField="month"*/}
      {/*        yField="count"*/}
      {/*        smooth*/}
      {/*        point={{*/}
      {/*          size: 5,*/}
      {/*          shape: 'diamond',*/}
      {/*        }}*/}
      {/*      />*/}
      {/*    </ProCard>*/}
      {/*  </Col>*/}
      {/*  <Col span={8}>*/}
      {/*    <ProCard title="各科目通过率">*/}
      {/*      <Pie*/}
      {/*        data={passRateData}*/}
      {/*        angleField="value"*/}
      {/*        colorField="type"*/}
      {/*        radius={0.8}*/}
      {/*        label={{*/}
      {/*          type: 'outer',*/}
      {/*        }}*/}
      {/*      />*/}
      {/*    </ProCard>*/}
      {/*  </Col>*/}
      {/*</Row>*/}

      {/* 最近学员列表 */}
      <ProCard title="最近学员动态" style={{ marginTop: '24px' }}>
        <List
          itemLayout="horizontal"
          dataSource={recentStudents}
          renderItem={(item) => (
            <List.Item>
              <List.Item.Meta
                avatar={<Avatar icon={<UserOutlined />} />}
                title={item.name}
                description={`学习进度：${item.progress}`}
              />
              <div>
                <Tag color={
                  item.status === '学习中' ? 'processing' :
                  item.status === '待考试' ? 'warning' :
                  'success'
                }>
                  {item.status}
                </Tag>
                <span style={{ marginLeft: 16, color: '#999' }}>{item.time}</span>
              </div>
            </List.Item>
          )}
        />
      </ProCard>
    </div>
  );
};

export default Home;
